
:root {
    /* 字体 */
  --font-weight-light: lighter;
  --font-weight-bold: bold;
  --font-weight-medium: normal;
  --font-weight-regular: normal;
  --font-weight-display: var(--font-weight-light);
  --font-weight-title: var(--font-weight-bold);
  --font-weight-title-sub: var(--font-weight-medium);
  --font-weight-sub-title: var(--font-weight-title-sub);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-caption: var(--font-weight-medium);
  --font-size-display-large: calc(56 * var(--unit));
  --font-size-display-medium: calc(48 * var(--unit));
  --font-size-display-small: calc(38 * var(--unit));
  --font-size-title-large: calc(30 * var(--unit));
  --font-size-title-medium: calc(24 * var(--unit));
  --font-size-title-small: calc(20 * var(--unit));
  --font-size-title-sub-large: calc(18 * var(--unit));
  --font-size-title-sub-medium: calc(16 * var(--unit));
  --font-size-title-sub-small: calc(14 * var(--unit));
  --font-size-sub-title-large: var(--font-size-title-sub-large);
  --font-size-sub-title-medium: var(--font-size-title-sub-medium);
  --font-size-sub-title-small: var(--font-size-title-sub-small);
  --font-size-body-large: calc(16 * var(--unit));
  --font-size-body-medium: calc(14 * var(--unit));
  --font-size-body-small: calc(12 * var(--unit));
  --font-size-caption-large: calc(12 * var(--unit));
  --font-size-caption-medium: calc(10 * var(--unit));
  --font-size-caption-small: calc(8 * var(--unit));
}

.font-display {
  font-size: var(--font-size-display-medium);
  font-weight: var(--font-weight-display);
}
.font-display-large,
.font-display-l {
  font-size: var(--font-size-display-large);
  font-weight: var(--font-weight-display);
}
.font-display-medium,
.font-display-m {
  font-size: var(--font-size-display-medium);
  font-weight: var(--font-weight-display);
}
.font-display-small,
.font-display-s {
  font-size: var(--font-size-display-small);
  font-weight: var(--font-weight-display);
}

.font-title {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-title);
}
.font-title-large,
.font-title-l {
  font-size: var(--font-size-title-large);
  font-weight: var(--font-weight-title);
}
.font-title-medium,
.font-title-m {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-title);
}
.font-title-small,
.font-title-s {
  font-size: var(--font-size-title-small);
  font-weight: var(--font-weight-title);
}

.font-title-sub,
.font-sub-title {
  font-size: var(--font-size-title-sub-medium);
  font-weight: var(--font-weight-title-sub);
}
.font-title-sub-large,
.font-title-sub-l,
.font-sub-title-large,
.font-sub-title-l {
  font-size: var(--font-size-title-sub-large);
  font-weight: var(--font-weight-title-sub);
}
.font-title-sub-medium,
.font-title-sub-m,
.font-sub-title-medium,
.font-sub-title-m {
  font-size: var(--font-size-title-sub-medium);
  font-weight: var(--font-weight-title-sub);
}
.font-title-sub-small,
.font-title-sub-s,
.font-sub-title-small,
.font-sub-title-s {
  font-size: var(--font-size-title-sub-small);
  font-weight: var(--font-weight-title-sub);
}

.font-body {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
}
.font-body-large,
.font-body-l {
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-body);
}
.font-body-medium,
.font-body-m {
  font-size: var(--font-size-body-medium);
  font-weight: var(--font-weight-body);
}
.font-body-small,
.font-body-s {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-body);
}

.font-caption {
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-caption);
}
.font-caption-large,
.font-caption-l {
  font-size: var(--font-size-caption-large);
  font-weight: var(--font-weight-caption);
}
.font-caption-medium,
.font-caption-m {
  font-size: var(--font-size-caption-medium);
  font-weight: var(--font-weight-caption);
}
.font-caption-small,
.font-caption-s {
  font-size: var(--font-size-caption-small);
  font-weight: var(--font-weight-caption);
}


/* 使用LESS变量提高可维护性 */
@import './window.less';

@media screen and (max-width: @breakpoint-xlarge) {
  .font-display {
    font-size: var(--font-size-display-large);
    font-weight: var(--font-weight-display);
  }
  .font-title {
    font-size: var(--font-size-title-large);
    font-weight: var(--font-weight-title);
  }
  .font-title-sub,
  .font-sub-title {
    font-size: var(--font-size-title-sub-large);
    font-weight: var(--font-weight-title-sub);
  }
  .font-body {
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-body);
  }
  .font-caption {
    font-size: var(--font-size-caption-large);
    font-weight: var(--font-weight-caption);
  }
}
/* 小于 1440unit 显示 12 列 */
@media screen and (max-width: @breakpoint-large) {
  .font-display {
    font-size: var(--font-size-display-large);
    font-weight: var(--font-weight-display);
  }
  .font-title {
    font-size: var(--font-size-title-large);
    font-weight: var(--font-weight-title);
  }
  .font-title-sub,
  .font-sub-title {
    font-size: var(--font-size-title-sub-large);
    font-weight: var(--font-weight-title-sub);
  }
  .font-body {
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-body);
  }
  .font-caption {
    font-size: var(--font-size-caption-large);
    font-weight: var(--font-weight-caption);
  }
}
/* 小于 840unit 显示 8 列 */
@media screen and (max-width: @breakpoint-medium) {
  .font-display {
    font-size: var(--font-size-display-medium);
    font-weight: var(--font-weight-display);
  }
  .font-title {
    font-size: var(--font-size-title-medium);
    font-weight: var(--font-weight-title);
  }
  .font-title-sub,
  .font-sub-title {
    font-size: var(--font-size-title-sub-medium);
    font-weight: var(--font-weight-title-sub);
  }
  .font-body {
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-body);
  }
  .font-caption {
    font-size: var(--font-size-caption-medium);
    font-weight: var(--font-weight-caption);
  }
}
/* 小于 600unit 显示 4 列 */
@media screen and (max-width: @breakpoint-small) {
  .font-display {
    font-size: var(--font-size-display-small);
    font-weight: var(--font-weight-display);
  }
  .font-title {
    font-size: var(--font-size-title-small);
    font-weight: var(--font-weight-title);
  }
  .font-title-sub,
  .font-sub-title {
    font-size: var(--font-size-title-sub-small);
    font-weight: var(--font-weight-title-sub);
  }
  .font-body {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-body);
  }
  .font-caption {
    font-size: var(--font-size-caption-small);
    font-weight: var(--font-weight-caption);
  }
}
/* 小于 320unit 显示 2 列 */
@media screen and (max-width: @breakpoint-xsmall) {
  .font-display {
    font-size: var(--font-size-display-small);
    font-weight: var(--font-weight-display);
  }
  .font-title {
    font-size: var(--font-size-title-small);
    font-weight: var(--font-weight-title);
  }
  .font-title-sub,
  .font-sub-title {
    font-size: var(--font-size-title-sub-small);
    font-weight: var(--font-weight-title-sub);
  }
  .font-body {
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-body);
  }
  .font-caption {
    font-size: var(--font-size-caption-small);
    font-weight: var(--font-weight-caption);
  }
}

